<template>
  <div>
    <Header></Header>
    <div class="button-nav p-40">
      <div class="box">
        <div class="pt-10 pb-10 pl-20 pr-20 bg-grey flex font-14">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/learn/index' }">在线学习</el-breadcrumb-item>
            <el-breadcrumb-item>试卷详情</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="pt-10 pb-10 pl-20 pr-20 bg-grey flex space-between mt-20">
          <div class="flex">
            <el-button type="primary" @click="setFilter(1)">单项选择题</el-button>
            <el-button type="success" @click="setFilter(2)">多项选择题</el-button>
            <el-button type="warning" @click="setFilter(3)">正误判断题</el-button>
          </div>
          <el-button type="" @click="dialogVisible = true">退出学习</el-button>
        </div>
        <div class="border-dash pt-30 pb-30 pl-20 pr-20 bg-white" v-for="(item, index) in list" :key="index">
          <div>{{ index+1 }}、{{ item.title }}</div>
          <div class="pl-20 pr-20 mt-20" v-for="(itd, idx) in item.options_json" :key="idx">{{ idx }}、{{ itd }}</div>
          <div class="p-20 border-dash bg-grey mt-20">
            <div>正确答案：{{ item.result }}</div>
            <div class="mt-20">解析：{{ item.info }}</div>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>

    <el-dialog
        v-model="dialogVisible"
        title="提示"
        width="30%"
    >
      <span>是否退出当前学习？</span>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="() => { $router.back() }">
          确定
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import { ElMessageBox } from 'element-plus'
import { getQuestions } from '@/api/api'
export default {
  name: "Questions",
  components: {
    Header, Footer
  },
  data() {
    return {
      dialogVisible: false,
      paper_id: 0,
      type: null,
      list: []
    }
  },
  mounted() {
    this.paper_id = this.$route.query.id
    this.getDetail()
  },
  methods: {
    async getDetail() {
      this.list = await getQuestions({
        paper_id: this.paper_id,
        type: this.type
      })
    },
    setFilter(type) {
      this.type = type
      this.getDetail()
    }
  }
}
</script>

<style scoped>

</style>
